<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>share</title>
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<style type="text/css">
	    .mui-share{
	       position: fixed;
            bottom: 0px;
            width: 100%;
            height: 180px;
            background-color: #fff;
            padding: 10px 5px;
            margin: 0px;
	    }
		.mui-share li{
		    float: left;
		    width: 20%;
		    text-align: center;
		}
		.mui-share li img{
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .mui-share li .mui-subtitle{
           font-family: "microsoft yahei";
        }
        .mui-share .mui-btn{
            position: fixed;
            bottom: 10px;
            width: 90%;
            left: 5%;
            right: 5%;
        }
	</style>
	</head>
	<body>
		<button id="openShare" type="button" class="mui-btn mui-btn-blue mui-btn-block">打开分享</button>
        
        <ul class="mui-share mui-list-inline mui-hidden">
            <li data-id="weixin" data-scene="WXSceneSession">
                <img src="img/weixin.png"/>
                <span class="mui-subtitle">微信好友</span>
            </li>
            <li data-id="weixin" data-scene="WXSceneTimeline">
                <img src="img/pengyouquan.png"/>
                <span class="mui-subtitle">朋友圈</span>
            </li>
            <li data-id="sinaweibo">
                <img src="img/sinaweibo.png"/>
                <span class="mui-subtitle">新浪微博</span>
            </li>
            <li data-id="tencentweibo">
                <img src="img/tencentweibo.png"/>
                <span class="mui-subtitle">腾讯微博</span>
            </li>
            <li data-id="qq">
                <img src="img/qq.png"/>
                <span class="mui-subtitle">qq好友</span>
            </li>
            <button type="button" class="mui-btn mui-btn-blue mui-btn-block">取消</button>
        </ul>

		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">	
		    var shareClassName = document.querySelector('.mui-share');
		    // 打开分享
			document.getElementById("openShare").addEventListener('tap',function(){
			    shareClassName.classList.remove('mui-hidden');
			})	
			
			// 取消分享
			document.querySelector('.mui-share .mui-btn').addEventListener('tap',function(){
			    shareClassName.classList.add('mui-hidden');
			})
			
			// 分享操作
            var shares = {};
            mui.plusReady(function () {
                // 获取分享服务
                plus.share.getServices(function(s) {
                    if (s && s.length > 0) {
                        for (var i = 0; i < s.length; i++) {
                            var t = s[i];
                            shares[t.id] = t;
                        }
                    }
                }, function() {
                    console.log("获取分享服务列表失败");
                });
            })
			
			/**
			 * 监听分享点击事件
			 */
			mui('.mui-share').on('tap','li',function(e){
			    var id = this.getAttribute('data-id');
			    var scene = this.getAttribute('data-scene');
			    console.log(id);
			    var share = shares[id];
			    if (share) {
                    if (share.authenticated) {
                        shareMessage(share, scene);
                    } else {
                        share.authorize(function() {
                            shareMessage(share, scene);
                        }, function(e) {
                            mui.toast("认证授权失败：" + e.code + " - " + e.message);
                        });
                    }
                } else {
                    mui.toast("无法获取分享服务，请检查manifest.json中分享插件参数配置，并重新打包")
                }
			}) 

            /**
             * 分享发送消息
             * @param {Object} share
             * @param {Object} ex
             */
			function shareMessage(share, scene) {
                var msg = {
                    extra: {
                        scene: scene
                    }
                };
                msg.href = "http://www.dcloud.io/hellomui/";
                msg.title = "最接近原生APP体验的高性能前端框架";
                msg.content = "我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距";
                if (~share.id.indexOf('weibo')) {
                    msg.content += "；体验地址：http://www.dcloud.io/hellomui/";
                }
                msg.thumbs = ["_www/img/logo.png"];
                share.send(msg, function() {
                    mui.toast("分享到\"" + share.description + "\"成功！ ");
                }, function(e) {
                    mui.toast("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
                });
            }
		</script>
	</body>
</html>